<template>
    <div class="user-box">
        <div class="user-info">
            <div class="photo">
                <img src="../../public/images/user.jpg" alt="">
            </div>
            <div class="desc">
                <p class="name">用户名称</p>
                <p class="address">我的收获地址<i class="iconfont icon-right"></i></p>
            </div>
        </div>
        <div class="setting-list" ref="aboutContent">
            <div>
                <div class="item" v-for="(m, index) in meuns" :class="{ 'space-top':m.spaceTop }" :key="'menus'+index">
                    <div class="img">
                        <img :src="m.img" alt="" srcset="">
                    </div>
                    <div class="sub">
                        <span>{{ m.title }}</span>
                        <span class="right">{{ m.sub }}<i class="iconfont icon-right"></i></span>
                    </div>
                </div>
                <div class="login-out">
                    <input type="button" value="退出登录">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
    data() {
        return {
            meuns: [
                { title: "我的订单", img: "./images/order.png", spaceTop: true },
                { title: "我的购物车", img: "./images/shoppingCart.png", spaceTop: true },
                { title: "我的拼团", img: "./images/pieceTogether.png" },
                { title: "我的钱包", sub: "快速提现", img: "./images/wallet.png" },
                { title: "我的优惠券", img: "./images/discountCoupon.png" },
                { title: "我收藏的商品", img: "./images/collect.png" },
                { title: "我收藏的店铺", img: "./images/shop.png" },
                { title: "消息通知", img: "./images/message.png", spaceTop: true },
                { title: "客服", img: "./images/service.png" },
                { title: "意见反馈", img: "./images/feedback.png" }
            ]
        };
    },
    methods:{
        initScroll() {
            if(this.$sc){
                    this.$sc.refresh();
            }else{
                // 因为BS本身问题，直接在mounted构建无法读取DOM元素
                // 建议在 构建对象时 使用 40ms 延迟
                setTimeout(() => {
                    this.$sc = new BScroll(this.$refs.aboutContent, {
                        click:true
                    });
                }, 40);
            }
        }
    },
    activated(){
        // keep-alive 当前组件从缓存激活时执行的方法
        this.initScroll(); // 解决vue组件缓存导致的better-scroll 失效问题
    },
    mounted(){
        this.initScroll();
    },
    // 路由组件守卫，和普通的组件生命周期使用方式一致
    //     路由守卫==> 默认会阻止路由切换
    //          守卫参数
    //              1、next(path) 参数 是一个方法  ==> 放行方法，重指路由地址
    //              2、to 取值和$route数据结构一样 ==> 目标路由的相关参数
    //              3、from  取值和$route数据结构一样一样 ==> 切换前路由的相关参数
    // beforeRouteEnter (to, from, next) {
    //     console.log("beforeRouteEnter");
    //     console.log("to",to);
    //     console.log("from",from);

    //     // 判断当前用户是否登录
    //     next();// 直接放行
    //     // next("/login")
    // },
    // beforeRouteLeave (to, from, next) {
    //     console.log("beforeRouteLeave");
    //     next();
    // }
};
</script>
<style lang="less" scoped>
.user-box {
    position: absolute;
    top: 0px;
    bottom: @h;
    width: 100%;
    background-color: @ef;
    font-size: 0px;
    .user-info {
        height: 180px;
        background-color: white;
        position: relative;
        z-index: 10;
        .photo {
            float: left;
            height: 100%;
            width: 180px;
            padding: 40px;
            box-sizing: border-box;
            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
        }
        .desc {
            padding: 40px 0px;
            line-height: 54px;
            .name {
                font-size: 38px;
                color: @gray;
            }
            .address {
                font-size: 24px;
                color: @66;
                i {
                    font-size: 24px;
                    margin-left: 50px;
                }
            }
        }
    }
    .setting-list {
        position: absolute;
        top: 180px;
        bottom: 0px;
        width: 100%;
        .space-top {
            margin-top: 30px;
        }
        .item {
            height: 100px;
            background-color: white;
            padding-left: 40px;
            box-sizing: border-box;
            position: relative;
            border-bottom: 1px solid @de;
            .img {
                height: 100%;
                padding: 20px 20px 20px 0px;
                box-sizing: border-box;
                position: absolute;
                img {
                    height: 100%;
                    width: auto;
                }
            }
            .sub {
                height: 100%;
                line-height: 100px;
                box-sizing: border-box;
                padding-left: 80px;
                span {
                    font-size: 30px;
                }
                .right {
                    color: @99;
                    float: right;
                    margin-right: 30px;
                    font-size: 24px;
                    height: 100%;
                    i {
                        font-size: 24px;
                        margin-left: 10px;
                    }
                }
            }
        }
        .login-out {
            margin-top: 30px;
            text-align: center;
            padding: 0px 40px 30px;
            outline: none;
            input[type="button"] {
                font-size: 30px;
                font-weight: 100;
                background-color: @pink;
                border: none;
                color: white;
                width: 100%;
                padding: 20px 0px;
                border-radius: 10px;
                outline: none;
                &:active {
                    background-color: @light-pink;
                }
            }
        }
    }
}
</style>